import React from 'react'
import Count from './components/Count'
import { useTranslation } from 'react-i18next'
import { Space, Table, Tag, ConfigProvider } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useAppDispatch, useAppSelector } from './hooks'
// antd内置的语言包
// 简体中文
import zhCN from 'antd/es/locale/zh_CN'
// 越南
import vi_VN from 'antd/es/locale/vi_VN'
// 美式英语
import en_US from 'antd/es/locale/en_US'

// 引入langSlice中的actions
import langSlice from './redux/slice'
import './App.less'
const { setLang } = langSlice.actions

function App() {
  // 获取redux中存储的当前语言.用于控制antd内置文本
  const lang = useAppSelector((state) => {
    return state.lang.lang
  })

  const dispatch = useAppDispatch()

  // t是一个函数,传入语言包中的键,根据当前语言返回键对应的值
  // i18n是一个对象,有一个方法叫做changeLanguage可以切换当前语言
  const { t, i18n } = useTranslation('app')
  const columns: ColumnsType<any> = [
    {
      title: t('index'),

      render: (a, b, i) => i + 1,
    },
    {
      title: t('name'),
      dataIndex: 'name',
    },
    {
      title: t('age'),
      dataIndex: 'age',
    },
    {
      title: t('info'),
      dataIndex: 'info',
    },
  ]
  return (
    <ConfigProvider locale={lang === 'zh' ? zhCN : en_US}>
      <Count></Count>
      <hr />
      <h1>国际化的部分</h1>
      <button
        onClick={() => {
          i18n.changeLanguage('zh')
          dispatch(setLang('zh'))
        }}
      >
        中文
      </button>
      &nbsp;
      <button
        onClick={() => {
          i18n.changeLanguage('en')
          dispatch(setLang('en'))
        }}
      >
        english
      </button>
      <br />
      <p>{t('helo')}</p>
      <hr />
      <Table
        columns={columns}
        dataSource={[
          { name: 'zs', age: 18, info: 'xxx' },
          { name: 'ls', age: 19, info: 'yyy' },
        ]}
        rowKey="name"
        pagination={{
          total: 100,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
      />
    </ConfigProvider>
  )
}

export default App
